<template>
    <div>
        <div>
            <div>
                <div class="header_box">
                    <div>
                        <div @click="quxiao">取消</div>
                    </div>
                    <div name="center">添加属性</div>
                    <div name="right" @click="bianji">确定</div>
                </div>
            </div>
        </div>
        <!-- <header></header> -->
        <div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        class="py-2"
                        v-model="dataList[0]"
                        name="cnSpecification"
                        label="中文规格"
                        placeholder="如辣度"
                        :rules="[{ required: true, message: '如辣度' }]"
                    />
                    <van-field
                        class="py-2"
                        v-model="dataList[1]"
                        name="ukSpecification"
                        label="英文属性"
                        placeholder="英文属性"
                        :rules="[{ required: true, message: '如Such as Large' }]"
                    />
                    <div class="p-2 font-mi" @click="AddShuXing">属性标签</div>
                    <van-dialog v-model="show" title="添加属性标签" show-cancel-button :beforeClose="chargeBtn">
                        <!--输入框-->
                        <van-field
                            v-model="dataList[2]"
                            name="cnSpecification"
                            rows="1"
                            autosize
                            type="textarea"
                            placeholder="请输入中文标签"
                        />
                        <van-field
                            v-model="dataList[3]"
                            name="ukSpecification"
                            rows="1"
                            autosize
                            type="textarea"
                            placeholder="请输入英文标签"
                        />
                    </van-dialog>
                    <div v-if="naStater" class="font-mi p-2">暂无属性</div>
                    <div v-else class="d-flex p-2">
                        <van-icon name="close" class="font-mi Fright text-danger" @click="schuShu" />
                        <div class="font-mi p-1 bg-light">
                            {{ dataList[2] }}
                            {{ dataList[3] }}
                        </div>
                    </div>
                </van-cell-group>
                <div style="margin: 16px" class="py-1">
                    <van-button round block type="primary" native-type="submit"> 提交 </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { mapMutations } from 'vuex'

export default {
    data() {
        return {
            dataList: [],
            newList: [],
            show: false,

            name: [],
            naStater: true
        }
    },
    methods: {
        ...mapMutations(['CommAdd/XAdd']),
        quxiao() {
            this.$router.push('/CommodityMan/CommodityAdd')
        },
        bianji() {
            if (this.dataList.length == 6) {
                Toast.success('请点击下面的提交按钮')
            } else {
                Toast.fail('请检查一下是否填写完成')
            }
        },
        onSubmit(values) {
            console.log('submit', typeof values)
            this.newList = values
            console.log(this.dataList)
            console.log(this.newList)

            if (this.dataList.length == 6) {
                this['CommAdd/XAdd'](this.newList)
                Toast.success('添加完成')
                this.$router.push('/CommodityMan/CommodityAdd')
            } else {
                Toast.fail('添加失败')
            }
        },
        AddShuXing() {
            this.show = true
        },
        chargeBtn(action, done) {
            //确认or取消
            if (action === 'cancel') {
                //取消按钮
                done()
            } else if (action === 'confirm') {
                //确定按钮
                //向后端传值并关闭dialog弹出框
                this.show = false
                this.dataList.push(this.cName, this.eName)
                this.name.push(this.cName, this.eName)
                console.log(this.dataList)
                this.naStater = false
                this.cName = ''
            }
            this.eName = ''
            done()
        },
        schuShu() {
            this.naStater = true
            this.name = []
        }
    }
}
</script>

<style lang="scss" scoped>
.van-button--primary {
    background-color: rgba(255, 110, 83, 1);
    border: 1px solid rgba(255, 110, 83, 1);
}
.Fright {
    float: right;
}
</style>
